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Sophisticated Drag-Drop Images 

Add customisable Explorer-Style drag-drop images to .NET Framework applications using the ImageUst API 



M vbAccelerator Image List DragDrop Demonstration 
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The standard System .Windows. Forms drag-drop 
functionality provides a cursor to indicate that a drag-drop 
function is in progress. 

This article demonstrates how to add an image of the 
object being dragged to the drag -drop control, in the same 
way that Explorer does, using the ImageUst APIs. 

Drag an icon from the control on the left of the form, or pick 
up some text and drag it from this text box to see the effect. 




The standard .NET Framework drag-drop functionality provides a cursor to indicate that a drag-drop fun 
is in progress. This article demonstrates how to add an image of the object being dragged to the drag-d 
control, in the same way that Explorer does using the ImageUst APIs. 

About ImageUst Drag and Drop 

The ComCtl32.DLL ImageUst implementation provides functions for dragging an image on the screen. T 
dragging functions move an image smoothly, in color, and without any flashing of the cursor. In addition 
when you use the functions under Windows 2000 or XP the drag image is also rendered translucently an 
preserves any alpha shadows which greatly improves the visual appearance. 

Unfortunately although the .NET Framework imageList class is a thin wrapper on this implementation i 
doesn't expose any of the methods. However, there are only 8 API functions needed and they can easily 
wrapped into a re-usable class which encapsulates the Unmanaged code. 

Using the Sample Code 

The main class in the sample is imageListDrag. To use the class you follow these steps: 

1. Create an instance of the class 

ImageListDrag imageListDrag = new imageListDragO ; 

2. Tell the class which ImageList to use 

imageListDrag.hlmageList = ils.HandleQ ; 



3. Set the drag image to draw during dragging 

Typically you start a drag operation when specific conditions are met during a MouseDown action. O 
you know a drag operation is needed, you tell the class the index of the image in the ImageList to 
draw and the position to offset the drag image from the cursor in pixels using the startDrag met 
Once the drag operation has completed, call the completeDrag method to clear the image: 



protected override void onMouseDown(MouseEventArgs e) 
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// . . . code to determine if drag needed 
// if it is, then start the operation: 

imageLi stDrag.StartDrag(iconindex, -8, -8) ; 

thi s . DoDragDrop(data f DragDropEf f ects . Move) ; 

i mageLi stDrag . compl eteDrag () ; 



4. Update the drag image as dragging is performed 

The GiveFeedback event is called repeatedly during a drag operation whenever the item being 
dragged is over a drop target. 

protected override void OnGi veFeedback(Gi veFeedbackEventArgs e) 

// Raise the GiveFeedback event 
base.onGiveFeedback(e) ; 

// Draw the drag image: 
i 1 sDrag . DragDropO ; 

} 



During this event you can also detect which object the mouse is over and hide or show the drag 
image using the HideDraglmage method. 

That's pretty much it for creating a standard drag image. If you want to update the contents of the wind 
you're dragging over, then you should call HideDraglmage(true) prior to drawing and HideDraglmage 
(false) once complete. This ensures you don't overdraw the drag cursor. 

Creating Custom Drag Images 

Since the drag image is sourced from an image within an ImageList, it is straightforward to create custo 
drag images using the system. Drawing. Graphics methods just prior to starting the drag operation. Th 
sample code demonstrates how to do this with the TextBox control, rendering a portion of the selected t 
into the first image of an ImageList used for dragging: 

private void constructDraglmageO 

System. Windows. Forms. ImageLi st ils = this. ImageList; 

// Clear images in image list: 
ils. Images. Clear () ; 

// ImageList is buggy, need to ensure we do this: 
intPtr ilsHandle = ils. Handle; 

// create the bitmap to hold the drag image: 

Bitmap bitmap = new Bitmap(ils.lmageSize. width, ils.imageSize. Height) ; 
// Get a graphics object from it: 
Graphics gfx = Graphics. Fromlmage (bitmap); 
// Default fill the bitmap with black: 

gfx. FillRectangle(Brushes. Black, 0, 0, bitmap. width, bitmap. Height) ; 
// Draw text in highlighted form: 

StringFormat fmt = new stringFormat(StringFormatFlags.LineLimit) ; 
fmt. Alignment = Stri ngAlignment. Center ; 

SizeF size = gfx.MeasureString(this.SelectedText, this. Font, bitmap. width, fmt); 

float left = OF; 

if (size.Height> bitmap. Height) 

size. Height = bitmap. Height ; 

if (size. Width < bitmap. width) 
{ 
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left = (bitmap. width - size.width)/2F; 

RectangleF textRect = new RectangleF( 
left, OF, size. width, size. Height) ; 
gfx. Fil 1 Rectangle (SystemBrushes .Highlight, textRect) ; 

gf x . DrawSt ri nq(thi s . Sel ectedText , thi s . Font , SystemBrushes . Hi ghl i ghtText , 

textRect, fmt); 
fmt.DisposeO ; 

// Add the image to the imageList: 
i Is. images. Add(bitmap, color. Black) ; 

// clear up the graphics object: 
gfx.DisposeO ; 
// clear up the bitmap: 
bitmap. DisposeC) ; 

} 

Note that a lot of code during a drag-drop event in the .NET Framework runs on a differnt thread to the 
main UI thread. By default, exceptions thrown on the background thread don't get reported unless you 
explicitly catch them - beware! 

Limitations 

This section discusses some of the issues that can occur when using drag-drop images and how to work 
around them. 



Painting Issues 

The ImageList SDK notes that when drawing the drag image you can get issues with updates or screen 
painting unless you use the lmagel_ist_DragLeave API function to hide the drag image whilst the painti 
occurs (which is what the HideDraglmage method in the class does). Unfortunately, if you don't own the 
control that's being painted doing this isn't really an option. There are three things you can do to help a 
this being a problem: 



1. Draw the Drag Image Underneath the Cursor 

If you draw the drag image below the cursor, then its unlikely that any painting in the control will 
occur in the area of the drag image. To do this, use negative values for the xof f set and yoff set 
parameters of the startDrag method. 

2. Force windows to repaint to clear any left over effects when dropping 

After a drop it is possible that the control's display will be affected. For example, dropping text on 
text box causes the new text to be inserted, and some of that may occur under the drag image. Y 
can fix any artifacts by calling the Framework's invalidate and update methods. If the Window 
particularly tricky then the Windows Redrawwindow API call can be used. 

private struct RECT 

public int left; 
public int top; 
public int right; 
public int bottom; 



[Dlllmport("user32")] 

private extern static int Redrawwindow ( 
intPtr hwnd, ref RECT lprcupdate, 
intPtr hrgnupdate, int fuRedraw); 

[Dllimport("user32")] 

private extern static int ( 

IntPtr hwnd, ref RECT lpRect); 

private const int rdw_updatenow = 0x100; 
private const int RDW_INVALIDATE = 0x1; 
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private const int RDW_ai_LCHILDREN = 0x80; 
private const int RDW_ERASE = 0x4; 



// Assuming the handle variable contains your window's handle: 

RECT tR = new RECT() ; 

GetWindowRect (handle, ref tR) ; 

tR. right -= tr.left; 

tR.left = 0; 

tR. bottom -= tr.top; 

tR.top = 0; 

Redrawwindow(handle, ref tR, intPtr.zero, 

RDW_UPDATENOW | R DW_ I N V A U I D AT E | 
RDW_ALLCHILDREN | RDW_ERASE) 



3. Drag and Drop in the .NET Framework 

In order to display the drag drop image, you need to get some sort of event as the mouse moves 
the object that the mouse is over has AllowDrop set to true then the GiveFeedback is fired when 
the mouse moves (and all the time when it doesn't too!). However, if the object doesn't have it se 
then you won't get any events. This means that the drag image disappears as you move the mou 
over that object. There are two ways of working around this: 

1. Set all objects on the form to AllowDrop = true at design-time or run-time. This ensures t 
drag image is always displayed, but note that you may also need to code the OnDragOver 
method for every object to ensure DragDropEffects.None is returned to ensure the user g 
visual cue that they can't drop on that object. 

2. Use a Windows Mouse Hook to capture all mouse events during the duration of the drag. Th 
solves the issue completely but can adds complexity to debugging the project. 



Conclusion 

The imageListDrag class allows you to add custom drag-images to .NET Framework applications and is 
relatively simple to use, provided some care is taken placing the drag image, only drawing over known 
objects and ensuring all objects on the form respond to drag events. 
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